<template>
  <div
    style="
      padding: 10px 0px;
      background-color: rgb(239, 238, 238);
      height: 100%;
      overflow-y: auto;
    "
  >
    <div
      style="
        min-height: 60px;
        width: 100%;
        background-color: #fff;
        padding-top: 15px;
        padding-left: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div style="width: 45%; display: flex; align-items: center">
        <span style="font-weight: 1000;width: 100px;">{{$t('analyze.orderVal')}}：</span>
        <div class="contaion" @click="onclick">
          <div v-for="(item, index) in AllTags" :key="index" class="spanbox">
            <span class="tagspan">{{ item }}</span>
            <i class="iClose" @click="removeTag(item, index)"></i>
          </div>
          <input
            :placeholder="$t('analyze.inputVal')"
            v-model="inputValue"
            @keyup.enter="addTags"
            :style="inputStyle"
            class="inputTag"
            ref="inputTag"
            type="number"
          />
        </div>
      </div>

      <div style="width: 49%; font-weight: bold; height: 100%">
        <!-- <div>
        <span style="font-size:15px;">选择检材：</span>
                <el-select :popper-append-to-body="false" @change="selectChange()"  v-model="value1" placeholder="请选择活动区域">
                    <el-option :label="item" :value="item" v-for="(item,index) in proofList" :key="index"></el-option>
                </el-select>
       </div> -->
        <div>
          <span>{{$t('analyze.dateargne')}}：</span>
          <el-date-picker
            v-model="value2"
            type="daterange"
            :append-to-body="false"
            align="right"
            unlink-panels
            value-format="timestamp"
            range-separator="-"
            :start-placeholder="$t('analyze.startTime')"
            :end-placeholder="$t('analyze.endTime')"
            @change="changeDateFunction"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <div>
          <el-tag
            size="small"
            style="margin-left: 20px; margin-top: 5px"
            v-for="(item, index) in dateArray"
            :key="index"
            @close="closeTag(item, index)"
            closable
            >{{ item }}</el-tag
          >
        </div>
      </div>
    </div>
    <div style="background-color: #fff; padding: 10px 10px; display: flex">
      <div class="block" style="margin-left: 20px; width: 40%">
        <div>
          <span class="demonstration">{{$t('analyze.shijianfanwei')}}：</span>
          <el-time-picker
            is-range
            v-model="startTime"
            range-separator="-"
            :start-placeholder="$t('analyze.startTime')"
            :end-placeholder="$t('analyze.endTime')"
            format="HH:mm"
            value-format="HH:mm"
            :placeholder="$t('analyze.chooseTime')"
            @change="functiondate"
          ></el-time-picker>
        </div>
        <div>
          <el-tag
            size="small"
            style="margin-left: 20px; margin-top: 5px; float: left"
            v-for="(item, index) in dateList"
            :key="index"
            @close="closeTagDateList(item, index)"
            closable
            >{{ item }}</el-tag
          >
        </div>
      </div>
      
      <el-button
        type="primary"
        @click="searchKey()"
        size="medium"
        style="margin-left: 15px; height: 40px"
        icon="el-icon-search"
        >{{$t('analyze.search')}}</el-button
      >
      <el-button
        @click="getProofList()"
        size="medium"
        style="margin-left: 15px; height: 40px"
        icon="el-icon-refresh-left"
        >{{$t('analyze.rush')}}</el-button
      >
    </div>
    <!-- <div style="width: 100%;min-height: 130px;border-radius: 5px;background-color: #fff;display: flex;align-items: center;justify-content: space-between;padding:0 10px;">
        <div class="itemBox">
            <div style="font-size: 15px;font-weight: bold;margin-top:10px;margin-bottom: 5px;text-align: center;">总交易金额</div>
            <div style=" display: flex;align-items: center;">
                <img  width="40" height="40" src="../../../assets/finance.png" alt="">
                <countTo class="num" :startVal='0' separator="" :endVal='Number(numberData.allMoney)' :duration='3000'></countTo>
            </div>
        </div>
        <div class="itemBox">
            <div style="font-size: 15px;font-weight: bold;margin-top: 10px;margin-bottom: 5px;text-align: center;">总交易次数</div>
            <div style=" display: flex;align-items: center;">
                <img  width="40" height="40" src="../../../assets/transaction-order.png" alt="">
                <countTo class="num" :startVal='0' separator="" :endVal='Number(numberData.allTimes)' :duration='3000'></countTo>
            </div>
        </div>
        <div class="itemBox">
            <div style="font-size: 15px;font-weight: bold;margin-top: 10px;margin-bottom: 5px;text-align: center;">交易对象数</div>
            <div style=" display: flex;align-items: center;">
                <img  width="40" height="40" src="../../../assets/avatars.png" alt="">
                <countTo class="num" :startVal='0' separator="" :endVal='Number(numberData.Num)' :duration='3000'></countTo>
            </div>
        </div>
        <div class="itemBox">
            <div style="font-size: 15px;font-weight: bold;margin-top: 10px;margin-bottom: 5px;text-align: center;">最大交易金额</div>
            <div style=" display: flex;align-items: center;">
                <img  width="40" height="40" src="../../../assets/data-user.png" alt="">
                <countTo class="num" :startVal='0' separator="" :endVal='Number(numberData.maxMoney)' :duration='3000'></countTo>
            </div>
        </div>
        <div class="itemBox">
            <div style="font-size: 15px;font-weight: bold;margin-top: 10px;margin-bottom: 5px;text-align: center;">最新交易时间</div>
            <div style=" display: flex;align-items: center;">
                <img  width="40" height="40" src="../../../assets/expenses-one.png" alt="">
                <span class="num" style="font-size: 12px;">{{ formateDate(numberData.maxTime) }}</span>                
            </div>
        </div>
    </div> -->
    <div
      style="
        background-color: #fff;
        height: 430px;
        margin-top: 10px;
        border-radius: 5px;
        width: 100%;
        display: inline-block;
      "
    >
    <div style="margin-top: 10px;margin-left: 10px;">
      <el-button size="small" @click="getPayUserList()">{{$t('analyze.jiaoyicishu')}}</el-button> <el-button size="small" @click="moneyFunction()">交易金额</el-button>
    </div>
      <partner ref="partner" :default1="default1" :payUserList="payUserList" v-if="payUserList" :title="title" :value1="value1" :dateArray="dateArray" :dateList="dateList" :AllTags="AllTags" />
    </div>
    <!-- <div
      style="
        background-color: #fff;
        height: 400px;
        margin-top: 10px;
        border-radius: 5px;
        width: 49.5%;
        display: inline-block;
        margin-left: 1%;
      "
    >
      <moneyPie :userPayList="userPayList" v-if="userPayList" />
    </div> -->

    <div
      style="
        background-color: #fff;
        width: 100%;
        min-height: 359px;
        max-height: 600px;
        border-radius: 5px;
        padding: 15px 20px;
      "
    >
      <el-tabs v-model="activeName" >
        <el-tab-pane :label="$t('analyze.jiaoyiqianshi')" name="first">
          <el-table :data="userPayList" height="400" border style="width: 100%">
            <el-table-column prop="nick" :label="$t('analyze.jiaoyiObject')" width="180">
              <template slot-scope="scope">
                <div v-if="scope.row.nick">{{ scope.row.nick }}</div>
                <div v-else>{{ scope.row.sendernick }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="countMoney"
              :label="$t('analyze.jianyiVal')"
              sortable
              width="180"
            >
            </el-table-column>
            <el-table-column prop="cnt" sortable :label="$t('analyze.jiaoyiNumber')">
            </el-table-column>
            <el-table-column prop="model" :label="$t('analyze.apptype')">
              <template slot-scope="scope">
                <div v-if="scope.row.model == 'SMS'">{{$t('analyze.sms')}}</div>
                <div v-if="scope.row.model == 'wechat'">{{$t('analyze.wechat')}}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('analyze.jiaoyiDetils')" name="second">
          <el-table :data="numberList" height="400" ref="numberList" :empty-text="$t('analyze.jiaoyiTip')" border style="width: 100%">
            <el-table-column prop="contactname" :label="$t('analyze.jiaoyiObject')" width="250">
              <template slot-scope="scope">
                <div v-if='scope.row.model == "wechat"'>
                  <div>{{$t('analyze.jiaoyiAccount')}}：{{scope.row.accountNick}}</div>
                  <div v-if="scope.row.REMARK || scope.row.NICK">{{$t('analyze.jiaoyiObject')}}：{{scope.row.REMARK?scope.row.REMARK:scope.row.NICK}}</div>
                  <div v-else>{{$t('analyze.jiaoyiObject')}}：{{scope.row.sendernick?scope.row.sendernick:scope.row.username}}</div>
                </div>
                <div v-if='scope.row.model == "SMS"'>
                  <div>{{$t('analyze.sendPeop')}}：{{scope.row.sendernick}}</div>
                  <div>{{$t('analyze.number')}}：{{scope.row.phone}}</div>
                </div>
                
              </template>
            </el-table-column>
            <el-table-column
              prop="infoTime"
              :label="$t('analyze.jiaoyiTime')"
              sortable
              width="180"
            >
            <template slot-scope="scope">
              {{ formateDate(scope.row.infoTime) }}
            </template>
            </el-table-column>
            <el-table-column prop="money" sortable :label="$t('analyze.jianyiVal')">
            </el-table-column>
            <el-table-column prop="model" label="app">
              <template slot-scope="scope">
                <div v-if="scope.row.model == 'SMS'">{{$t('analyze.sms')}}</div>
                <div v-if="scope.row.model == 'wechat'">{{$t('analyze.wechat')}}</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              :label="$t('analyze.caozuo')"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row)" type="text" size="small">{{$t('analyze.positionTem')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="offset"
                :page-sizes="[20, 30, 40, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="numberTotal">
              </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('analyze.jianyiVal')" name="third">
          <el-table :data="payMoneyList" ref="payMoneyRef" height="400" :empty-text="$t('analyze.jianyiValDetils')" border style="width: 100%">
            <el-table-column prop="contactname" :label="$t('analyze.jiaoyiObject')" width="250">
              <template slot-scope="scope">
                <div v-if='scope.row.model == "wechat"'>
                <div>{{$t('analyze.jiaoyiAccount')}}：{{scope.row.accountNick}}</div>
                  <div v-if="scope.row.REMARK || scope.row.NICK">{{$t('analyze.jiaoyiObject')}}：{{scope.row.REMARK?scope.row.REMARK:scope.row.NICK}}</div>
                  <div v-else>{{$t('analyze.jiaoyiObject')}}：{{scope.row.sendernick?scope.row.sendernick:scope.row.username}}</div>
                </div>
                <div v-if='scope.row.model == "SMS"'>
                  <div>{{$t('analyze.sendPeop')}}：{{scope.row.sendernick}}</div>
                  <div>{{$t('analyze.number')}}：{{scope.row.phone}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="infoTime"
              :label="$t('analyze.jiaoyiTime')"
              sortable
              width="180"
            >
            <template slot-scope="scope">
              {{ formateDate(scope.row.infoTime) }}
            </template>
            </el-table-column>
            <el-table-column prop="money" sortable :label="$t('analyze.jianyiVal')">
            </el-table-column>
            <el-table-column prop="model" label="app">
              <template slot-scope="scope">
                <div v-if="scope.row.model == 'SMS'">{{$t('analyze.sms')}}</div>
                <div v-if="scope.row.model == 'wechat'">{{$t('analyze.wechat')}}</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row)" type="text" size="small">{{$t('analyze.positionTem')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
              <el-pagination
                @size-change="handleSizeChangeMoney"
                @current-change="handleCurrentChangeMoney"
                :current-page="moneyOffset"
                :page-sizes="[20, 30, 40, 100]"
                :page-size="moneyLimit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="moneyTotal">
              </el-pagination>
            </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import countTo from "vue-count-to";
import partner from "./partner.vue";
import moneyPie from "./money.vue";
import { parseTime } from "@/utils/index";
import {
  getProofListApi,
  appPayCountApi,
  payUserListApi,
  getUserPayNumberApi,
  getKeyNumber,
  getDateKeyListApi,
} from "@/api/proofOnly/index";
import { bus } from '../../../main.js';

export default {
  components: {
    countTo,
    partner,
    moneyPie,
  },
  name: "fund",
  data() {
    return {
      default1:true,
      offset:1,
      limit:20,
      moneyOffset:1,
      moneyLimit:20,
      numberTotal:0,
      moneyTotal:0,
      numberList:[],
      payMoneyList:[],
      title:'',
      activeName:'first',
      dateList: [],
      startTime: null,
      endTime: "",
      payUserList: [],
      userPayList: [],
      numberData: "",
      value1: "",
      proofList: "",
      dateArray: [],
      value2: "",
      //输入框
      inputValue: "",
      //tag
      AllTags: [888,1314,666,123],
      //输入框宽度
      inputLength: "",
      //计算删除位置
      n: 0,
      pickerOptions11: {
        format: "HH:mm",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [
        {
          date: "242353252",
          name: "微信",
          address: 1,
          number: 1000,
        },
        {
          date: "242341232",
          name: "支付宝",
          address: 2,
          number: 4567,
        },
        {
          date: "24233213252",
          name: "银行卡",
          address: 3,
          number: 2344,
        },
        {
          date: "24265452",
          name: "信用卡",
          address: 4,
          number: 1122,
        },
      ],
    };
  },
  watch: {
    //监听输入的值越多，输入框越长
    inputValue(val) {
      // 实时改变input输入框宽度，防止输入内容超出input默认宽度显示不全
      this.inputLength = this.$refs.inputTag.value.length * 12 + 50;
    },
  },
  computed: {
    //计算属性：计算出动态输入框宽度
    inputStyle() {
      let style = {};
      style.width = `${this.inputLength}px`;
      return style;
    },
  },
  mounted() {

  },
  created() {
    this.getProofList();
  },
  methods: {
    handleEdit(row) {
      const proof_num = sessionStorage.getItem("analyzeProof");
      switch (row.model) {
        case "通讯录":
          row.list_offset = 1;
          row.list_limit = 20;
          row.msg_offset = 1;
          row.app_name = row.phone ? row.phone : row.otherPhone;
          row.proof_num = proof_num;
          break;
        case "SMS":
          row.list_offset = 1;
          row.list_limit = 20;
          row.model = 'sms',
          row.msg_offset = 1;
          row.app_name = row.phone;
          row.proof_num = proof_num;
          row.searchKey = row.money
          break;
        case "wechat":
          row.list_offset = 1;
          row.list_limit = 20;
          row.msg_offset = 1;
          row.app_name = row.isChatRoom==0?'好友':'群组'
          row.proof_num = proof_num;
          row.account_id = row.ACCOUNT_ID;
          row.username = row.username;
          row.contact_username = row.contactname;
          row.msgtime = row.infoTime;
          row.id = row.tid;
          break;
        default:
          break;
      }
      // 储存类型
      sessionStorage.setItem("model", row.model);
      // 储存节点数据
      sessionStorage.setItem("sumData", JSON.stringify(row));
      // 激活跳转组件
      this.$store.commit("SET_ORDERDATA", Date.parse(new Date()));
      sessionStorage.setItem("only", true);
      // this.$router.push({ name: "proofAnalyze"});
      // console.log(this.$parent)
      // if(row.model == 'SMS'){
      //   bus.$emit('data-event', 'Data shared between siblings');
      // }else{
        this.$parent.changeContent();
      // }
    },
    handleSizeChange(val) {
        this.limit = val;
        this.$refs.partner.changeOffsetOrLimit(this.offset,this.limit)
      },
    handleCurrentChange(val) {
        this.offset = val;
        this.$refs.partner.changeOffsetOrLimit(this.offset,this.limit)

        this.$nextTick(() => {
          this.$refs.numberList.bodyWrapper.scrollTop = 0;
        })
    },
    // 金额分页
    handleSizeChangeMoney(val){
      this.moneyLimit = val;
      this.$refs.partner.changeMoneyOffsetOfLimit(this.moneyOffset,this.moneyLimit)
    },
    handleCurrentChangeMoney(val){
      this.moneyOffset = val;
      this.$refs.partner.changeMoneyOffsetOfLimit(this.moneyOffset,this.moneyLimit)
      this.$nextTick(() => {
        this.$refs.payMoneyRef.bodyWrapper.scrollTop = 0;
      })
    },
    getNumberList(list,total){
      this.numberList = list;
      this.numberTotal = total;
      this.activeName = 'second';
      // this.offset = 1;
    },
    getPayMoney(list,total){
      this.payMoneyList = list;
      this.moneyTotal = total;
      this.activeName = 'third';
      // this.moneyOffset = 1;
    },
    moneyFunction(){
      this.title = '交易对象金额';
      // let data = {
      //   proof_num: this.value1,
      //   key_money: this.AllTags.join(","),
      // };
      let data = {};
      if(this.default1){
        data = {
          proof_num: this.value1,
        };
      }else{
         data = {
          proof_num: this.value1,
          key_money: this.AllTags.join(","),
          key_date: this.dateArray.join(","),
          key_time: this.dateList.join(","),
        };
      }
      getUserPayNumberApi(data)
        .then((res) => {
          this.payUserList = res.data.slice(0, 10);
        })
        .catch((error) => {});
    },
    selectChange() {
      // this.getProofList()
      this.getDateKey();
      this.getKeyNumberfunction();
      this.getPayUserList();
      this.payUserNumber();
    },
    searchKey() {
      // this.getKeyNumberfunction();
      this.default1 = false;
      this.payUserNumber();
      this.getPayUserList();
    },
    functiondate() {
      if (this.startTime.length <= 0) return;
      this.dateList.push(this.startTime[0] + "|" + this.startTime[1]);
    },
    getDateKey() {
      let data = {
        proof_num: this.value1,
      };
      getDateKeyListApi(data)
        .then((res) => {
          this.dateList = res.data.map((item) => item.replace("-", "|"));
          // this.initTopNumber();统计数值
        })
        .catch((error) => {});
    },
    getKeyNumberfunction() {
      let data = {
        proof_num: this.value1,
      };
      getKeyNumber(data)
        .then((res) => {
          this.AllTags = res.data;
        })
        .catch((error) => {});
    },
    payUserNumber() {
      let data = {
        proof_num: this.value1,
        key_money: this.AllTags.join(","),
        key_date: this.dateArray.join(","),
        key_time: this.dateList.join(","),
      };
      getUserPayNumberApi(data)
        .then((res) => {
          this.userPayList = res.data.slice(0, 10);
        })
        .catch((error) => {});
    },
    getPayUserList() {
      this.title = '交易对象次数';
      let data = {};
      if(this.default1){
        data = {
          proof_num: this.value1,
        };
      }else{
         data = {
          proof_num: this.value1,
          key_money: this.AllTags.join(","),
          key_date: this.dateArray.join(","),
          key_time: this.dateList.join(","),
        };
      }
      payUserListApi(data)
        .then((res) => {
          this.payUserList = res.data.slice(0, 10);
        })
        .catch((error) => {});
    },
    payUserNumber1() {
      let data = {
        proof_num: this.value1,
        // key_money: '',
        // key_date: '',
        // key_time: '',
      };
      getUserPayNumberApi(data)
        .then((res) => {
          this.userPayList = res.data.slice(0, 10);
        })
        .catch((error) => {});
    },
    getPayUserList1() {
      this.title = '交易对象次数';
      let data = {
        proof_num: this.value1,
        // key_money: '',
        // key_date: '',
        // key_time: '',
      };
      payUserListApi(data)
        .then((res) => {
          this.payUserList = res.data.slice(0, 10);
        })
        .catch((error) => {});
    },
    initTopNumber() {
      // console.log('555',this.dateList)
      let data = {
        proof_num: this.value1,
        key_money: this.AllTags.join(","),
        key_date: this.dateArray.join(","),
        key_time: this.dateList.join(","),
      };
      appPayCountApi(data)
        .then((res) => {
          this.numberData = res.data[0];
        })
        .catch((error) => {});
    },
    getProofList() {
      this.default1 = true;
      this.value1 = sessionStorage.getItem("analyzeProof");
      this.getDateKey();
      this.getKeyNumberfunction();
      this.getPayUserList1();
      this.payUserNumber1();

      // getProofListApi({}).then(res=>{
      //   if(res.data.length>0){
      //     this.proofList = res.data;
      //     this.value1 = res.data[0];
      //     this.getDateKey();
      //     this.getKeyNumberfunction();
      //     this.getPayUserList();
      //     this.payUserNumber();
      //   }
      // }).catch(res=>{

      // })
    },
    resetting() {
      this.dateArray = [];
      this.AllTags = [];
    },
    closeTag(item, index) {
      // console.log(e)
      this.dateArray.splice(index, 1);
      if (this.dateArray.length == 0) {
        this.value2 = "";
      }
    },
    closeTagDateList(item, index) {
      this.dateList.splice(index, 1);
      if (this.dateList.length == 0) {
        this.startTime = "";
      }
    },
    formateDate(date) {
      return parseTime(date);
    },
    changeDateFunction() {
      this.dateArray.push(
        this.formateDate(this.value2[0]).substring(0, 10) +
          "|" +
          this.formateDate(this.value2[1]).substring(0, 10)
      );
    },

    //点击叉叉删除tag
    removeTag(item, index) {
      this.AllTags.splice(index, 1);
    },

    //回车增加tag
    addTags() {
      //新增函数中可以加一些你所需要的校验规则。比如只能是数子，或者不能输入‘，’等
      if (this.inputValue) {
        //添加tag
        this.AllTags.push(this.inputValue);
        //清空输入框
        this.inputValue = "";
      }
    },
    //点击父盒子输入框获取焦点
    onclick() {
      this.$nextTick(() => {
        this.$refs.inputTag.focus();
      });
    },
  },
};
</script>

<style scoped>
.num {
  font-size: 18px;
  font-weight: 1000;
  margin-left: 10px;
}
.itemBox {
  width: 15%;
  height: 100px;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  padding: 0 15px;
  box-shadow: 0.7px 0px 14.8px rgba(0, 0, 0, 0.002),
    1.7px 0px 23.4px rgba(0, 0, 0, 0.008), 3.5px 0px 32.1px rgba(0, 0, 0, 0.021),
    7.3px 0px 44.8px rgba(0, 0, 0, 0.027), 20px 0px 80px rgba(0, 0, 0, 0.03);
}

.contaion {
  width: 600px;
  box-sizing: border-box;
  background-color: white;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  font-size: 15px;
  text-align: left;
  padding-left: 5px;
  word-wrap: break-word;
  overflow: hidden;
  display: inline-block;
}
/* 标签 */
.spanbox {
  display: inline-block;
  font-size: 14px;
  margin: 3px 4px 3px 0;
  background-color: #ecf5ff;
  border: 1px solid #e8eaec;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
/* 标签文字 */
.tagspan {
  height: 24px;
  line-height: 22px;
  max-width: 99%;
  position: relative;
  display: inline-block;
  padding-left: 8px;
  color: #409eff;
  font-size: 14px;
  opacity: 1;
  vertical-align: middle;
  overflow: hidden;
  transition: 0.25s linear;
}
/* tag的叉叉 */
.iClose {
  padding: 0 6px 0 4px;
  opacity: 1;
  -webkit-filter: none;
  filter: none;
  color: #409eff;
  /* font-weight: 600; */
  cursor: pointer;
}
/* 鼠标经过叉叉 */
.iClose:hover {
  background-color: #409eff;
  border-radius: 50%;
  color: #fff;
}
.iClose:after {
  content: "\00D7";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* line-height: 27px; */
  transition: 0.3s, color 0s;
}
/* input */
.inputTag {
  font-size: 16px;
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  width: auto;
  min-width: 270px;
  vertical-align: top;
  height: 32px;
  color: #495060;
  line-height: 32px;
}
/* 输入框提示文字大小 */
input:placeholder-shown {
  font-size: 16px;
}
</style>